import { OneModal } from '@/components/one-ui';
import { IOneModalRef } from '@/pages/type';
import { Spin, Button, message } from 'antd';
import React, { Ref, useEffect, useMemo, useRef } from 'react';
import pageStyles from '@/common/pageLayout.less';
import { onCloseModalCommon } from '@/utils';
import { getWarnByIDService, getWarnSetReadService } from '../services';
import ScrollBarLayout from '@/components/ScrollBarLayout';

export const ContractWarnDetailModal: React.FC<ContractWarnsHomePageAPI.IDetailModal> = ({ onClose, checkRowsInfo, reloadManage, curRes, handleStyle }) => {
  /** 弹框Ref */
  const updateWarnModalRef: Ref<IOneModalRef> = useRef(null);

  /** 关闭弹框 */
  const onCloseModal = () => {
    reloadManage();
    onCloseModalCommon(updateWarnModalRef);
  };

  /** 详情接口回调 */
  const detailCallback = (res: any) => {
    if (res && res?.msgFlag) {
      if (res?.obj && res?.obj?.readFlag == 0) {
        getWarnSetReadRun({
          id: res?.obj?.id,
          versionNum: res?.obj?.versionNum,
          handleStyle: handleStyle,
        });
      }
    } else {
      message.error(res?.msg);
    }
  };

  /** 获取详情接口 */
  const { getWarnByIDInfo, getWarnByIDLoading, getWarnByIDRun } = getWarnByIDService(detailCallback);

  /** 设置已读接口回调 */
  const setReadCallback = (res: any) => {
    if (res && res?.msgFlag) {
    } else {
      message.error(res?.msg);
    }
  };

  /** 获取设置已读 */
  const { getWarnSetReadRun, getWarnSetReadLoading } = getWarnSetReadService(setReadCallback);

  /** 初始化 */
  useEffect(() => {
    if (checkRowsInfo && checkRowsInfo?.id) {
      getWarnByIDRun({
        id: checkRowsInfo?.id,
      });
    }
  }, [checkRowsInfo]);

  /** 弹框底部按钮 */
  const footerModal = useMemo(() => {
    return (
      <>
        <Button key="back" onClick={onCloseModal}>
          关闭
        </Button>
      </>
    );
  }, [curRes]);

  return (
    <OneModal
      open={true}
      ref={updateWarnModalRef}
      width={document.body.clientWidth * 0.4}
      title={'提醒事项内容'}
      onCancel={onClose}
      bodyStyle={{
        padding: '0px',
        height: document.body.clientHeight * 0.4,
      }}
      centered
      footer={footerModal}
      confirmLoading={getWarnByIDLoading || getWarnSetReadLoading}
    >
      <Spin spinning={getWarnByIDLoading || getWarnSetReadLoading}>
        <ScrollBarLayout style={{ padding: '5px 20px' }}>
          <div
            style={{ fontSize: '20px', textIndent: '2em' }}
            dangerouslySetInnerHTML={{
              __html: getWarnByIDInfo && getWarnByIDInfo?.id ? getWarnByIDInfo?.handleInfo : '',
            }}
            className={pageStyles['editorStyle']}
          />
        </ScrollBarLayout>
      </Spin>
    </OneModal>
  );
};
